<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/master.css" />
		<script type="text/javascript" src="js/rem.js"></script>
		<script type="text/javascript" src="js/axios.min.js">
		</script>
	</head>
	<body>
		<div class="container">
			<header>
				<form action="">
					<input type="text" id="ipt">
					<p><span class="iconfont icon-weimingmingwenjianjia_sousuo"></span>输入商品名、商家、商圈、分类……</p>
				</form>
				<ul class="hint">

				</ul>
			</header>
			<div class="content canTing-content">

				<ul class="canTing-left-list">
					<a href="#caixi">
						<li>
							<h5 class="target">餐厅</h5>
						</li>
					</a>
					<a href="#huanjing">
						<li>
							<h5>咖啡</h5>
						</li>
					</a>
					<a href="#优惠">
						<li>
							<h5>夜生活</h5>
						</li>
					</a>
					<a href="#wenyu">
						<li>
							<h5>文娱</h5>
						</li>
					</a>
					<a href="#tianpin">
						<li>
							<h5>甜品</h5>
						</li>
					</a>
					<a href="#gouwu">
						<li>
							<h5>购物</h5>
						</li>
					</a>
					<a href="#chaguan">
						<li>
							<h5>茶馆</h5>
						</li>
					</a>
					<a href="#tiyan">
						<li>
							<h5>体验</h5>
						</li>
					</a>
					<a href="#zhusu">
						<li>
							<h5>住宿</h5>
						</li>
					</a>
					<a href="#zhusu">
						<li>
							<h5>运动</h5>
						</li>
					</a>
				</ul>
				<ul class="canTing-right-list">
					<li id="caixi">
						<div class="title">
							<p class="text">菜系</p>
						</div>
						<a href="餐厅.html">
							<figure>
								<img src="img/ct_1.jpg" alt="">
								<figcaption>
									全部菜系
								</figcaption>
							</figure>
						</a>
						<a href="#">
							<figure>
								<img src="img/中餐.png" alt="">
								<figcaption>
									中餐
								</figcaption>
							</figure>
						</a>
						<a href="#">
							<figure>
								<img src="img/西餐.png" alt="">
								<figcaption>
									西餐
								</figcaption>
							</figure>
						</a>
						<a href="#">
							<figure>
								<img src="img/日本料理.png" alt="">
								<figcaption>
									日本料理
								</figcaption>
							</figure>
						</a>
						<a href="#">
							<figure>
								<img src="img/韩国料理.png" alt="">
								<figcaption>
									韩国料理
								</figcaption>
							</figure>
						</a>
						<a href="#">
							<figure>
								<img src="img/早午餐.png" alt="">
								<figcaption>
									早午餐
								</figcaption>
							</figure>
						</a>
						<a href="#">
							<figure>
								<img src="img/轻食.png" alt="">
								<figcaption>
									轻食
								</figcaption>
							</figure>
						</a>
						<a href="#">
							<figure>
								<img src="img/其他菜系.png" alt="">
								<figcaption>
									其他菜系
								</figcaption>
							</figure>
						</a>

					</li>

					<li id="huanjing">
						<div class="title">
							<p class="text">环境</p>
						</div>
						<a href="#">
							<figure>
								<img src="img/日系.png" alt="">
								<figcaption>
									日系
								</figcaption>
							</figure>
						</a>
						<a href="#">
							<figure>
								<img src="img/小清新.png" alt="">
								<figcaption>
									小清新
								</figcaption>
							</figure>
						</a>
						<a href="#">
							<figure>
								<img src="img/极简.png" alt="">
								<figcaption>
									极简
								</figcaption>
							</figure>
						</a>
						<a href="#">
							<figure>
								<img src="img/复古.png" alt="">
								<figcaption>
									复古
								</figcaption>
							</figure>
						</a>

					</li>


					<li id="优惠">
						<div class="title">
							<p class="text">优惠</p>
						</div>
						<a href="#">
							<figure>
								<img src="img/满减优惠.png" alt="">
								<figcaption>
									满减优惠
								</figcaption>
							</figure>
						</a>
						<a href="#">
							<figure>
								<img src="img/限时特价.png" alt="">
								<figcaption>
									限时特价
								</figcaption>
							</figure>
						</a>
					</li>
				</ul>
			</div>
			<footer>
				<a href="recommend-beijing.html"><span class="iconfont icon-gouwo"></span>推荐</a>
				<a href="tips.html"><span class="iconfont icon-qingdan"></span>攻略</a>
				<a href=""><span class="iconfont icon-sousuo target-span"></span>搜索</a>
				<a href="around-all.html"><span class="iconfont icon-icon-yuanxk"></span>附近</a>
				<a href="mine.html"><span class="iconfont icon-wode"></span>我的</a>
			</footer>
		</div>
		<script type="text/javascript">
			let h5s = document.querySelectorAll("h5");
			for (let i = 0; i < h5s.length; i++) {
				h5s[i].onclick = function() {
					for (let j = 0; j < h5s.length; j++) {
						h5s[j].classList.remove("target");
					}
					this.classList.add("target");
				}
			}

			let form = document.querySelector('form')
			let formP = document.querySelector('form p')
			form.onclick = function() {
				formP.style.display = 'none';
				
			}
			axios.get("https://www.fastmock.site/mock/65027db1a3ee03c0c185fcb349e7497c/first/api/sousuo", {
				params: {

				}
			}).then(res => {
				// console.log(res.data.data.list);
				var arr = res.data.data.list;
				let html0 =
					`
				<div class="title">
					<p class="text">环境</p>
				</div>
				<a href="#">
					<figure>
						<img src="img/日系.png" alt="">
						<figcaption>
							日系
						</figcaption>
					</figure>
				</a>
				<a href="#">
					<figure>
						<img src="img/小清新.png" alt="">
						<figcaption>
							小清新
						</figcaption>
					</figure>
				</a>
				<a href="#">
					<figure>
						<img src="img/极简.png" alt="">
						<figcaption>
							极简
						</figcaption>
					</figure>
				</a>
				<a href="#">
					<figure>
						<img src="img/复古.png" alt="">
						<figcaption>
							复古
						</figcaption>
					</figure>
				</a>
				`
				let html = arr.map(v =>
					`
				<a href="#">
					<figure>
						<img src=${v.image}>
						<figcaption>
							${v.descript}
						</figcaption>
					</figure>
				</a>
				`
				).join("")
				let huanjing = document.querySelector("#huanjing");
				huanjing.innerHTML = html0 + html;
			})
			var hint = document.querySelector(".hint");

			function box(obj) {
				// var obj = JSON.parse(res)
				if (obj.g) {
					var arr = obj.g.map(v => `
							<li>
								<p>${v.q}</p>
							</li>
							`)
					var html = arr.join("");

					hint.innerHTML = html;
				}
			}
			ipt.oninput = function() {
				let sc = document.createElement("script");
				sc.src =
					`https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1445,21091,29523,29720,29567,29221&wd=${ipt.value}&req=2&csor=3&pwd=11&cb=box&_=1568883201802`
				document.head.appendChild(sc);
				document.head.removeChild(sc);
				hint.style.background = "rgba(0,255,255,.7)"
			}
			
				
			
			hint.onclick = function() {
				hint.style.display = "none"
				ipt.value="";
				// location.href = "https://www.baidu.com"
			}
		</script>
	</body>
</html>
